<template>
	<view class="container">
		<!-- 页面标题 -->
		<!-- <view class="header">
      <view class="title">家教老师</view>
    </view> -->

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" @click="showCityPicker">
				<text class="filter-text">{{ selectedCity }}</text>
				<!-- <text class="filter-arrow">▼</text> -->
				<text class="iconfont-v2 icon-youxiajiaosanjiao"></text>
			</view>
			<view class="filter-item" @click="showSubjectPicker">
				<text class="filter-text">{{ selectedSubject }}</text>
				<!-- <text class="filter-arrow">▼</text> -->
				<text class="iconfont-v2 icon-youxiajiaosanjiao"></text>
			</view>
			<view class="filter-item" @click="showTypePicker">
				<text class="filter-text">{{ selectedType }}</text>
				<!-- <text class="filter-arrow">▼</text> -->
				<text class="iconfont-v2 icon-youxiajiaosanjiao"></text>

			</view>
			<view class="filter-item sexs" @click="showGenderPicker">
				<text class="filter-text">{{ selectedGender }}</text>
				<!-- <text class="filter-arrow">▼</text> -->
				<text class="iconfont-v2 icon-youxiajiaosanjiao"></text>
			</view>
		</view>

		<!-- 认证信息 -->
		<!-- <view class="certification-info">
      <text class="cert-text">身份认证 · 学历认证</text>
    </view> -->

		<!-- 老师列表 -->
		<view class="teacher-list">
			<view class="teacher-card" v-for="(teacher, index) in teacherList" :key="index"
				@click="viewTeacherDetail(teacher)">
				<!-- 头像区域 -->
				<view class="avatar-section">
					<view class="avatar-container">
						<image class="avatar" :src="teacher.teacherAvatar" mode="aspectFill"></image>
						<view class="gender-badge" :class="teacher.gender === 'male' ? 'male' : 'female'">
							{{ teacher.gender === 'male' ? '♂' : '♀' }}
						</view>
					</view>
					<view class="login-info">
						<text class="login-label">最近登录</text>
						<text class="login-time">{{ teacher.lastLogin || '今天' }}</text>
					</view>
				</view>

				<!-- 老师信息区域 -->
				<view class="teacher-info">
					<!-- 姓名和标签 -->
					<view class="name-section">
						<text class="teacher-name">{{ teacher.name || '李老师'}}</text>
						<view class="tags">
							<view class="role-tag">{{ teacher.role || '大学生教员'}}</view>
							<view class="university-tag">{{ teacher.school }}</view>
						</view>
					</view>

					<!-- 服务区域 -->
					<view class="service-area">
						<text class="area-label">上门区域:</text>
						<view class="area-tags">
							<view class="area-tag" >
								{{ teacher.serviceArea }}
							</view>
						</view>
					</view>

					<!-- 可教科目 -->
					<view class="subjects">
						<text class="subjects-label">可教科目:</text>
						<view class="subjects-list">
							<text class="subject-item" v-for="(subject, subjectIndex) in teacher.sub"
								:key="subjectIndex">
								{{ subject }}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai'
					:hidden='isloading==false'></text>{{teacherList.length > 0?loadTitle:''}}
			</view>
			<!-- 使用通用空状态组件 -->
			<EmptyState 
				v-if="teacherList.length == 0"
				type="default"
				title="暂无老师"
				description="当前没有符合条件的老师"
				:show-button="false"
				button-text="刷新试试"
				@button-click="refreshTeachers"
			/>
		</view>

		<!-- 城市选择器 -->
		<u-picker :show="cityPickerShow" :columns="cityColumns" @confirm="confirmCity" @cancel="cityPickerShow = false"
			title="选择城市"></u-picker>

		<!-- 科目选择器（2级联动） -->
		<!-- 科目选择器组件 -->
		<SubjectPicker :show="subjectPickerShow" @confirm="confirmSubject" @cancel="subjectPickerShow = false" />

		<!-- 教员类型选择器 -->
		<u-picker :show="typePickerShow" :columns="typeColumns" @confirm="confirmType" @cancel="typePickerShow = false"
			title="选择教员类型"></u-picker>

		<!-- 性别选择器 -->
		<u-picker :show="genderPickerShow" :columns="genderColumns" @confirm="confirmGender"
			@cancel="genderPickerShow = false" title="选择性别"></u-picker>
	</view>
</template>

<script>
	import SubjectPicker from '@/components/SubjectPicker.vue'
	import EmptyState from '@/components/common/EmptyState.vue'
	import * as api from '@/api/family'
	/**
	 * 家教老师列表页面
	 * 展示可用的家教老师信息
	 */
	export default {
		name: 'TeacherListPage',
		components: {
			SubjectPicker,
			EmptyState
		},
		data() {
			return {
				thisForm: {
					page: 1,
					limit: 15,
					status: 'all',
					ordersn: '',
					itemType: 'all',
					is_sign: 0
				},
				isloading:false,
				loadTitle:'加载更多',
				loadend: false,
				// 筛选相关数据
				selectedCity: '南昌市',
				selectedSubject: '全部科目',
				selectedType: '全部类型',
				selectedGender: '性别',

				// 选择器显示状态
				cityPickerShow: false,
				subjectPickerShow: false,
				typePickerShow: false,
				genderPickerShow: false,

				// 城市数据
				cityColumns: [
					['南昌市', '九江市', '景德镇市', '萍乡市', '新余市', '鹰潭市', '赣州市', '宜春市', '上饶市', '吉安市', '抚州市']
				],


				// 教员类型数据
				typeColumns: [
					['全部类型', '大学生教员', '专职老师', '退休教师', '在职教师', '研究生教员']
				],

				// 性别数据
				genderColumns: [
					['不限', '男', '女']
				],

				// 老师列表
				teacherList: [],

				// 原始数据列表（用于筛选）
				allTeacherList: []
			}
		},
		onLoad() {
			this.loadTeacherList();
		},
		onReachBottom() {
			uni.showLoading({
				title: '正在加载',
				mask: true
			});
			this.loadTeacherList();
		},
		methods: {
			/**
			 * 加载老师列表（Mock数据）
			 * 从本地JSON文件加载数据，支持筛选条件
			 */
			loadTeacherList() {
				uni.showLoading({
					title: '加载中...'
				});

				let that = this;
				let list = [];
				if(that.loadend){
					uni.hideLoading();
					return
				} 
				that.isloading = true;
				api.getHotTeachersApi(this.thisForm).then(res => {
					list = res.data.list;
					let loadend = res.data.totalPage <= that.thisForm.page;
					if (list.length > 0) {
						that.teacherList = that.teacherList.concat(list);
						that.thisForm.page++;
					}
					
					that.isloading = false;
					that.loadend = loadend
					that.loadTitle = loadend ? "已加载完" : "加载更多";
					uni.hideLoading();
				}).catch(res => {
					uni.showToast({
						title: res,
						icon: 'none',
					});
					uni.hideLoading();
					that.isloading = false;
					that.loadTitle = "加载更多";
				})
			},

			/**
			 * 查看老师详情
			 * @param {Object} teacher - 老师信息
			 */
			viewTeacherDetail(teacher) {
				uni.navigateTo({
					url: `/pages/fast/jiajiao/teacher-detail?id=${teacher.id}`
				})
			},

			/**
			 * 显示城市选择器
			 */
			showCityPicker() {
				this.cityPickerShow = true
			},

			/**
			 * 显示科目选择器
			 */
			showSubjectPicker() {
				console.log('显示科目选择器')
				this.subjectPickerShow = true
			},

			/**
			 * 显示教员类型选择器
			 */
			showTypePicker() {
				this.typePickerShow = true
			},

			/**
			 * 显示性别选择器
			 */
			showGenderPicker() {
				this.genderPickerShow = true
			},

			/**
			 * 确认城市选择
			 * @param {Object} e 选择结果
			 */
			confirmCity(e) {
				this.selectedCity = e.value[0]
				this.cityPickerShow = false
				this.filterTeachers()
			},

			/**
			 * 确认科目选择
			 * @param {Object} e 选择结果
			 */
			confirmSubject(data) {
				console.log('科目选择结果:', data)
				this.selectedSubject = data.subject
				this.subjectPickerShow = false
				this.filterTeachers()
			},

			/**
			 * 确认教员类型选择
			 * @param {Object} e 选择结果
			 */
			confirmType(e) {
				this.selectedType = e.value[0]
				this.typePickerShow = false
				this.filterTeachers()
			},

			/**
			 * 确认性别选择
			 * @param {Object} e 选择结果
			 */
			confirmGender(e) {
				this.selectedGender = e.value[0]
				this.genderPickerShow = false
				this.filterTeachers()
			},


			/**
			 * 根据筛选条件过滤老师列表
			 */
			filterTeachers() {
				console.log('筛选条件:', {
					city: this.selectedCity,
					subject: this.selectedSubject,
					type: this.selectedType,
					gender: this.selectedGender
				});

				// 从原始数据开始筛选
				let filteredList = [...this.allTeacherList];

				// 按城市筛选
				if (this.selectedCity && this.selectedCity !== '全部城市') {
					filteredList = filteredList.filter(teacher => teacher.city === this.selectedCity);
				}

				// 按科目筛选
				if (this.selectedSubject && this.selectedSubject !== '全部科目') {
					filteredList = filteredList.filter(teacher => {
						return teacher.subjects.some(subject => subject.includes(this.selectedSubject));
					});
				}

				// 按教员类型筛选
				if (this.selectedType && this.selectedType !== '全部类型') {
					filteredList = filteredList.filter(teacher => teacher.role === this.selectedType);
				}

				// 按性别筛选
				if (this.selectedGender && this.selectedGender !== '性别' && this.selectedGender !== '不限') {
					const genderMap = {
						'男': 'male',
						'女': 'female'
					};
					const targetGender = genderMap[this.selectedGender];
					filteredList = filteredList.filter(teacher => teacher.gender === targetGender);
				}

				// 更新显示列表
				this.teacherList = filteredList;

				console.log('筛选结果数量:', filteredList.length);
			},

			/**
			 * 刷新老师列表
			 */
			refreshTeachers() {
				this.teacherList = [];
				this.thisForm.page = 1;
				this.loadend = false;
				this.loadTeacherList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	/* 页面容器 */
	.container {
		background: #f8f8f8;
		min-height: 100vh;
	}

	/* 页面标题 */
	.header {
		padding: 20rpx 0;
		text-align: center;
		background: white;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	/* 筛选栏 */
	.filter-bar {
		display: flex;
		background: white;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		gap: 20rpx;
	}

	.filter-item {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 16rpx 0;

		// border-radius: 8rpx;
		// transition: all 0.3s ease;
		.iconfont-v2 {
			font-size: 16rpx;
			color: #999;
		}

		&.sexs {
			margin-left: auto;
		}
	}

	// .filter-item:active {
	//   background: #e9ecef;
	//   transform: scale(0.98);
	// }

	.filter-text {
		font-size: 26rpx;
		color: #666;
		margin-right: 8rpx;
	}

	.filter-arrow {
		font-size: 20rpx;
		color: #999;
	}

	/* 认证信息 */
	.certification-info {
		padding: 20rpx 30rpx;
		background: white;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.cert-text {
		font-size: 24rpx;
		color: #666;
	}

	/* 老师列表 */
	.teacher-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		// margin-top: 20rpx;
		padding: 20rpx;
	}

	/* 老师卡片 */
	.teacher-card {
		background: white;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		display: flex;
		gap: 24rpx;
	}

	/* 头像区域 */
	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		flex-shrink: 0;
	}

	.avatar-container {
		position: relative;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background: #f0f0f0;
	}

	.gender-badge {
		position: absolute;
		top: -8rpx;
		left: -8rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		font-weight: bold;
		color: white;

		&.male {
			background: #4A90E2;
		}

		&.female {
			background: #FF69B4;
		}
	}

	.login-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4rpx;
	}

	.login-label {
		font-size: 24rpx;
		color: #999;
	}

	.login-time {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
	}

	/* 老师信息区域 */
	.teacher-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	/* 姓名和标签区域 */
	.name-section {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.teacher-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.tags {
		display: flex;
		gap: 12rpx;
		flex-wrap: wrap;
	}

	.role-tag {
		background: #ED6567;
		color: white;
		padding: 6rpx 12rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.university-tag {
		background: white;
		color: #333;
		border: 2rpx solid #ff6b35;
		padding: 6rpx 12rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	/* 服务区域 */
	.service-area {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.area-label {
		font-size: 26rpx;
		color: #666;
	}

	.area-tags {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
	}

	.area-tag {
		background: #F5F5F5;
		color: #333;
		padding: 6rpx 12rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	/* 可教科目 */
	.subjects {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.subjects-label {
		font-size: 26rpx;
		color: #666;
	}

	.subjects-list {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
	}

	.subject-item {
		font-size: 24rpx;
		color: #999;

		&:not(:last-child)::after {
			content: '、';
			color: #999;
		}
	}

	.flex-col-center{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mar-top-80{
		margin-top: 80rpx;
	}
	.mar-bottom-20{
		margin-bottom: 20rpx;
	}
	.w-140{
		width: 280rpx;
	}
	.h-140{
		height: 280rpx;
	}
	.font-16{
		font-size: 32rpx;
	}
</style>